﻿{extend name="$index_style_layout" /}

<!--SEO相关-->
{block name="head_title"}{$fid?($info['seo_title']?:$info['name']):$m_info['title']}{/block}
{block name="head_keword"}{$fid?($info['seo_keywords']?:$info['name']):$m_info['title']}{/block}
{block name="head_description"}{$info.seo_description}{/block}

{block name="body_content"}

<!-- 滑动按钮要用到的CSS与JS文件,他涉及到三个class类 swiper-container swiper-wrapper swiper-slide -->
<link href="__STATIC__/libs/swiper/swiper.min.css" rel="stylesheet">
<script src="__STATIC__/libs/swiper/swiper.min.js"></script>
 
<!--分类开始-->
<style type="text/css">
.MainMenu{
	margin-top:8px;
	background: #FFF;
	padding: 15px 10px;
}
.MainMenu ul:after{
	content: '';
	display:block;
	clear: both;
}
.MainMenu ul li{
	width:25%;
	float: left;
	overflow: hidden;
	position: relative;
	margin-bottom:5px;
}
.MainMenu ul li span,.MainMenu ul li em{
	display: block;
	width:60px;
	overflow: hidden;
	margin: auto;
	text-align: center;
	position: relative;
}
.MainMenu ul li span{
	border-radius: 50%;
	background: #ccc;
	color: #FFF;
}
.MainMenu ul li em{
	height: 20px;
	overflow: hidden;
	font-size:14px;
}
.MainMenu ul li span:before{
	content: '';
	display: block;
	padding-top: 100%;
}
.MainMenu ul li span i{
	position: absolute;
	left:50%;
	top: 50%;
	font-size:30px;
  -webkit-transform: translate3D(-50%, -50%, 0);
      -ms-transform: translate3D(-50%, -50%, 0);
          transform: translate3D(-50%, -50%, 0);
}
.sort_button{
	width:100%;
}
.sort_button .swiper-pagination{
	bottom:0px !important;
}
</style>
<div class="MainMenu">
	<ul class="swiper-container sort_button">
		<div class="swiper-wrapper">
			{volist name=":array_chunk(fun('Sort@son',$fid)?:fun('Sort@brother',$fid),8,true)" id="array"}
			<div class="swiper-slide">
				{volist name="$array" id="name"}
				<li><a href="{:urls('content/index',['fid'=>$key])}"><span {if $key==$fid}style="background:#23C075;"{/if}><i class="{$key|get_sort='logo'|default='fa fa-leaf'}"></i></span><em>{$name}</em></a></li>
				{/volist}
			</div>
			{/volist}
		</div>
		<div class="swiper-pagination"></div>
	</ul>
</div>
<script>
    $(function () {
        var swiper = new Swiper('.sort_button', {
			autoplay: {
				delay: 2000,
			 },
			pagination: {
				el: '.swiper-pagination', 
			},
        });
    })
</script>
<!--分类结束-->


<style type="text/css">
.scroll-sort{
	margin-bottom:10px;
	padding-right:8px; 
	border-bottom:1px solid #F1F1F1;
	font-size:13px;
}
.scroll-sort span a{
	color:#666;
}
.scroll-sort span{ 
	margin-right:10px; 
	line-height:30px;
	display:block;
	float:left;
}

.scroll-sort span:hover a{
	font-weight:bold;
	color:orange;
}
.scroll-sort .choose{
	border-bottom:1px solid #62B3E7;
}
.scroll-sort .choose a{
	color:orange;
} 
.scroll-sort .stitle{
	float:left;
	line-height:30px;
	padding-left:8px;
	padding-right:10px;
	color:#62B3E7;
}
.swiper-slide_filtrate{width: auto!important;}
</style>

	<!--自定义字段开始-->
	{volist name=":fun('field@list_filter',$mid)" id="rs"}
	<div class="scroll-sort">
		<div class="stitle">{$rs.title}：</div>
		<div class="swiper-container more_{$rs.name}">
			<div class="swiper-wrapper">
				<span class='swiper-slide swiper-slide_filtrate {if input($rs.name)===null}choose{/if}'>
				<a href='{:urls("index","fid=$fid&$rs[opt_url]")}'>不限</a></span>
			{volist name="$rs.opt" id="vs"}
				<span class='swiper-slide swiper-slide_filtrate {if input($rs.name)==$vs.key}choose{/if}'><a href='{:urls("index","fid=$fid&$vs[url]")}'>{$vs.title}</a></span>
			{/volist}
			</div>
		</div>
	</div> 
	<script>
		$(function () {
			var swiper = new Swiper('.more_{$rs.name}', {
				spaceBetween: 0,
				slidesPerView:'auto',
				freeMode: true
			});
		})
	</script>
	{/volist}
	<!--自定义字段结束-->
	
	<!--城市开始-->
	<div class="scroll-sort">
		<div class="stitle">区域：</div>
		<div class="swiper-container more_city">
			<div class="swiper-wrapper">
				<span class='swiper-slide swiper-slide_filtrate {if input("zone_id")===null}choose{/if}'><a href='{:urls("index",fun("field@make_filter_url","street_id,zone_id,page"))}'>全部</a></span>
			{volist name=":get_area('','',input('city_id')?:($webdb['city_id']?:6))" id="name"}
				<span class='swiper-slide swiper-slide_filtrate {if input("zone_id")==$key}choose{/if}'><a href='{:urls("index","zone_id=$key&".fun("field@make_filter_url","zone_id,page"))}'>{$name}</a></span>
			{/volist}
			</div>
		</div>
	</div> 
	<script>
		$(function () {
			var swiper = new Swiper('.more_city', {
				spaceBetween: 0,
				slidesPerView:'auto',
				freeMode: true
			});
		})
	</script>
	<!--城市结束-->

	<!--镇街开始-->
	{if input('zone_id')&&$array=get_area('','',input('zone_id'))}
	<div class="scroll-sort">
		<div class="stitle">街镇：</div>
		<div class="swiper-container more_zone">
			<div class="swiper-wrapper">				 
			{volist name="$array" id="name"}
				<span class='swiper-slide swiper-slide_filtrate {if input("street_id")==$key}choose{/if}'><a href='{:urls("index","street_id=$key&".fun("field@make_filter_url","street_id,page"))}'>{$name}</a></span>
			{/volist}
			</div>
		</div>
	</div> 
	<script>
		$(function () {
			var swiper = new Swiper('.more_zone', {
				spaceBetween: 0,
				slidesPerView:'auto',
				freeMode: true
			});
		})
	</script>
	{/if}
	<!--镇街结束-->


<a href="{:urls('add')}"><img src="__STATIC__/group/hylist/join.jpg" style="max-width:100%;"></a>

<link rel="stylesheet" href="__STATIC__/group/list.css">	
<div class="MainContainer ShowContentType">
	<div class="ShowTypes">
		<a href="#">默认</a>
		<a href="#">热门</a>
		<a href="#">推荐</a>
	</div>
	<div class="ListBox">
	{qb:listpage name="wap_qun_list_001" rows="8" order="list" by="desc"}
		<div class="list">
			<ul>
				<li class="img"><a href="{$rs.url}"><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nopic.png'"><span class="num{$i}">{$i}</span></a></li>
				<li class="info">
					<div class="title"><a href="{$rs.url}">{$rs.title}</a></div>
					<div class="cnt">{$rs.content|get_word=200}</div>
					<div class="other">
					    <span><a href="tel:{$rs.telphone}"><i style="color:#62B3E7;" class="glyphicon glyphicon-phone-alt"></i>{$rs.telphone}</a> <i style="color:#62B3E7;" class="glyphicon glyphicon-map-marker"></i>{$rs.address} </span>
					</div>
				</li>
				<li class="join"><a href="#" onclick="joinGroup({$rs.id})">收藏</a></li>
			</ul>
		</div>
	{/qb:listpage}
	</div>
	<div class="ListBox"></div>
	<div class="ListBox"></div>
	<div class="ShowMores" style="display:none;">查看更多...</div>
	<!--
	<div class="addGroup">
		<ul>
			<ol><a href="{:murl('content/postnew')}"><i class="fa fa-plus"></i></a></ol>
			<li>创建村庄</li>
		</ul>
	</div>-->
</div>	

<script type="text/javascript">

var ajax_url_db = ['&order=list&by=desc&','&order=view&by=desc&','&status=2&order=list&by=desc&'];
var choose_i = 0; //选中第几项
var haveshowpage = []; //每一项,作个标志,已经已显示到第几页
    haveshowpage[0] = 1; //第一项就从第二页开始

//显示更多
function showMoreContent(){	
	var url = ajax_url_db[choose_i];	//第几项对应的网址
	haveshowpage[choose_i]++;
	$.get('{qb:list_url name="wap_qun_list_001" /}' + haveshowpage[choose_i] + url,function(res){
		if(res.code==0){
			if(res.data==''){
				if(haveshowpage[choose_i]==1){
					layer.msg("没有相关内容!",{time:1000});
					$('.ShowContentType .ListBox').eq(choose_i).html('');
					return ;
				}
				layer.msg("已经显示完了！",{time:500});
				$('.ShowMores').off("click");
				$('.ShowMores').html('显示完了');
				$('.ShowMores').css({'background':'#eee'});
			}else{
				if(haveshowpage[choose_i]==1){
					$('.ShowContentType .ListBox').eq(choose_i).html(res.data);
				}else{
					$('.ShowContentType .ListBox').eq(choose_i).append(res.data);
				}
				scroll_get = true;
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}


//切换显示
function showContentType(num){

	choose_i = num;
	$('.ShowMores').off("click");	//先移除,避免重复加多次click事件
	$('.ShowMores').on("click",showMoreContent);
	$('.ShowMores').html('查看更多');
	$('.ShowMores').css({'background':'orange'});

	if(haveshowpage[num]==undefined){
		haveshowpage[num] = 0;
		showMoreContent();
	}

	$('.ShowContentType .ShowTypes a').removeClass('ck');
	$('.ShowContentType .ShowTypes a').eq(num).addClass('ck');
	$('.ShowContentType .ListBox').hide();
	$('.ShowContentType .ListBox').eq(num).show();
}
$('.ShowContentType .ShowTypes a').click(function(){
	showContentType( $(this).index() );
});
showContentType(0);

//滚动显示更多
var scroll_get = true;	//做个标志,不要反反复复的加载
$(document).ready(function () {
	$(window).scroll(function () {
		if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
			scroll_get = false;			
			layer.msg('内容加截中,请稍候',{time:1500});
			showMoreContent();
		}
	});
});


function joinGroup(id){
	$.get("{:urls('wxapp.member/join')}?id=" + id ,function(res){
		if(res.code==0){
			layer.alert("加入成功！");
		}else{
			layer.alert("加入失败:"+res.msg);
		}	
	});
}
</script>

{/block}